// hooks
import { useEffect, useState } from "react"
import axios from "axios"

// 自定义hook
function useToggle() {
  const [value, setValue] = useState(true)
  const toggleButton = () => {
    setValue(!value)
  }
  return [value, toggleButton] // return 出一个对象或数组都可以
}
// 自定义hook
function useGetList() {
  const [list, setList] = useState([])
  const getList = async () => {
    const {
      data: {
        data: { channels },
      }, // 对象的多层级解构赋值
    } = await axios.get("http://geek.itheima.net/v1_0/channels?id=1")
    console.log(channels)
    setList(channels)
  }
  useEffect(() => {
    getList()
  }, [])
  return { list, setList }
}

// 父组件
function App() {
  const [value, toggleButton] = useToggle() // 数组解构赋值
  const { list, setList } = useGetList()

  const handleDel = (id) => {
    setList(list.filter((item) => item.id !== id))
  }
  return (
    <div>
      <button onClick={toggleButton}>toggle</button>
      {value && <h1>hello</h1>}
      {list.map((item) => (
        <Item item={item} key={item.id} onDel={handleDel} />
      ))}
    </div>
  )
}
// 子组件
function Item({ item, onDel }) {
  return (
    <div>
      <button onClick={() => onDel(item.id)}>删除</button>
      <span>{item.name}</span>
    </div>
  )
}
export default App
